<template>
    <div>
        <el-row class="warp" v-loading="uploadLoading">
            <el-col :span="24" class="warp-breadcrum">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
                    <el-breadcrumb-item>订单列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>

            <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
                <!--工具条-->
                <el-row :span="24" class="query-form">
                    <el-form :inline="true" :model="filters">
                        <el-form-item class="query-el-form-item" label="订单编号">
                            <el-input v-model="filters.orderNo" placeholder="订单编号"
                                      @keyup.enter.native="handleSearch"></el-input>
                        </el-form-item>
                        <el-form-item class="query-el-form-item" label="状态">
                            <el-select v-model="filters.orderState" placeholder="请选择">
                                <el-option label="创建" :value="0"></el-option>
                                <el-option label="待支付" :value="1"></el-option>
                                <el-option label="审核中" :value="2"></el-option>
                                <el-option label="处理中" :value="3"></el-option>
                                <el-option label="已结束" :value="4"></el-option>
                                <el-option label="已取消" :value="5"></el-option>
                                <el-option label="已回退" :value="6"></el-option>
                            </el-select>
                        </el-form-item>


                        <el-form-item class="query-el-form-item" style="float: right">
                            <el-button
                                    size="small" @click="downloadTemplFn()" type="info">下载模板
                            </el-button>
                        </el-form-item>

                        <el-form-item class="query-el-form-item" style="float: right">
                            <el-upload
                                    class="avatar-uploader"
                                    :headers="headOb"
                                    :action="fileActionUrl"
                                    :show-file-list="false"
                                    :on-success="uploadExcelHandleSuccess"
                                    :before-upload="fileBeforeUpload">
                                <el-button class="query-el-form-item" type="success">上传催收信息
                                </el-button>
                            </el-upload>
                        </el-form-item>

                        <el-form-item class="query-el-form-item" style="float: right">
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                        </el-form-item>

                    </el-form>
                </el-row>

                <!--列表-->
                <el-table stripe :data="bizDomains" highlight-current-row v-loading="loading" style="width: 100%;">
                    <el-table-column type="index" width="60">
                    </el-table-column>
                    <el-table-column prop="orderNo" label="订单编号" min-width="170">
                    </el-table-column>
                    <el-table-column prop="amount" label="金额" min-width="170">
                    </el-table-column>
                    <el-table-column prop="orderState" label="状态" :formatter="formatState" width="105" sortable>
                    </el-table-column>
                    <el-table-column prop="dateCreated" label="创建时间" min-width="150">
                    </el-table-column>
                    <el-table-column property="operate" label="操作" width="180">
                        <template scope="scope">
                            <el-button
                                    size="mini" type="text" icon="el-icon-edit"
                                    @click="$router.push('/law/enterpriseOrderMain/' + scope.row.id)">查看
                            </el-button>

                            <el-button
                                    size="mini" type="text" icon="el-icon-circle-check"
                                    v-if="scope.row.orderState==0 || scope.row.orderState==1"
                                    @click="$router.push('/order/order_oper/' + scope.row.id)">支付
                            </el-button>


                            <el-button
                                    size="mini" type="text" icon="el-icon-delete"
                                    v-if="scope.row.orderState==0 || scope.row.orderState==1"
                                    @click="doCancle(scope.row.id)">取消
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNumber"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.totalCount">
            </el-pagination>
        </el-row>




    </div>
</template>

<script>
    import bizAPI from '../../api/api_order';
    import Vue from 'vue'

    export default {
        data() {
            return {
                fileActionUrl: this.$proper.backEndUrl + '/order/uploadFileToOrder',
                headOb: {'authToken': localStorage.getItem('authToken')},

                filters: {
                    orderState: ''
                },
                detailDialog: {
                    isShow: false,
                    title: '订单信息'
                },
                detailForm: {
                    orderState: 0
                },
                bizDomains: [],
                page: {
                    pageSize: 10,
                    pageNumber: 1,
                    totalCount: 0
                },
                loading: false,
                uploadLoading: false
            }
        },
        methods: {
            submitDetailForm(formName) {
                let me = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        bizAPI.changeState(this.detailForm).then(result => {
                            me.$message({
                                message: result.message,
                                type: (result.code === '0000') ? 'success' : 'error'
                            })
                            me.handleSearch()
                            me.detailDialog.isShow = false
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //显示转换
            formatState: function (row, column) {
                // 订单状态 0	 创建, 1 待支付, 2 审核中, 3 处理中, 4 已结束, 5	 已取消, 6 已回退

                let state = '';
                if (row.orderState == 0) {
                    state = '创建'
                }
                if (row.orderState == 1) {
                    state = '待支付'
                }
                if (row.orderState == 2) {
                    state = '审核中'
                }
                if (row.orderState == 3) {
                    state = '处理中'
                }
                if (row.orderState == 4) {
                    state = '已结束'
                }
                if (row.orderState == 5) {
                    state = '已取消'
                }
                if (row.orderState == 6) {
                    state = '已回退'
                }
                return state;
            },

            //上传excel 成功后
            uploadExcelHandleSuccess(res, file) {
                let me = this;
                me.uploadLoading = false;
                me.$message({
                    message: res.message,
                    type: (res.code === '0000') ? 'success' : 'error'
                });

                if (res.code === '0000') {
                    let orderId = res.data;
                    console.log("orderId:" + orderId);
                    me.$router.push({path: '/order/order_oper/' + orderId});
                    console.error(orderId)
                }
            },

            fileBeforeUpload(file) {
                let me = this;
                me.uploadLoading = true;
                let type = file.type
                const isJPG = (type.indexOf('image') !== -1)
                const isLt2M = file.size / 1024 / 1024 < 2
                /*if (!isJPG) {
                  this.$message.error('只能上传图片格式!')
                }*/
                if (!isLt2M) {
                    me.$message.error('上传的文件大小不能超过 2MB!')
                }
                //return isJPG && isLt2M
                return isLt2M
            },

            //下载模板
            downloadTemplFn() {
                // 下载模板
                window.location.href = Vue.prototype.$proper.backEndUrl + '/order/downLoadTemplFile';
            },

            //取消订单
            doCancle(bizId) {
                let me = this
                this.$confirm('此操作将取消该订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    bizAPI.doCancle({
                        'orderId': bizId,
                        'collectionObjId': '8a88f31566dd43120166dd9840a30026'
                    }).then(result => {
                        me.$message({
                            message: result.message,
                            type: (result.code === '0000') ? 'success' : 'error'
                        })
                        me.handleSearch()
                    })
                }).catch(() => {
                })
            },
            handleSearch() {
                let me = this;
                me.page.totalCount = 0;
                me.page.pageNumber = 1;
                me.search();
            },
            //获取列表
            search: function () {
                let me = this;
                let params = {};
                Object.assign(params, this.filters);
                Object.assign(params, this.page);


                me.loading = true;
                bizAPI.qryByPage(params).then(function (result) {
                    me.loading = false;
                    if (result) {
                        me.page.totalCount = result.data.totalCount;
                        me.bizDomains = result.data.result;
                    }
                }, function (err) {
                    me.loading = false;
                    me.$message.error({showClose: true, message: err.toString(), duration: 2000});
                }).catch(function (error) {
                    me.loading = false;
                    console.log(error);
                    me.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
                });
            },
            handleSizeChange(pageSize) {
                let me = this;
                me.page.pageSize = pageSize;
                me.search();
            },
            handleCurrentChange(pageNumber) {
                let me = this;
                me.page.pageNumber = pageNumber;
                me.search();
            }

        },
        mounted() {
            let status = this.$route.query.orderState
            if (status) {
                this.filters.orderState = parseInt(status)
            }
            this.handleSearch()
        }
    }
</script>

<style scoped>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
